<template>
  <q-layout>
    <q-layout-header ref="header">
      <xheader :title="title"></xheader>
    </q-layout-header>
    <q-page-container>
      <xscrollarea :scroll-height="scrollHeight">
        <q-page padding>
          <q-input ref="code" float-label="随工单号" v-model="code" clearable
                   @blur="searchCode"
                   @keydown.enter="searchCode" :after="$parent.getScanIcon('code',this)">
            <q-autocomplete
              @search="$parent.autoSearch"
              :min-characters="1"
              :max-results="99"
            />
          </q-input>
          <q-input ref="peifangCode" float-label="配方清单号" v-model="peifangCode" clearable
                   @blur="searchCode"
                   @keydown.enter="searchCode" :after="$parent.getScanIcon('peifangCode',this)"/>
          <br>
          <q-btn label="提交" color="primary" class="full-width" @click="submit"/>
          <br><br>
          <q-table
            :data="materialInBill"
            :columns="columns"
            dense
            separator="cell"
            :pagination="{page:1,rowsPerPage:20}"
            hide-bottom
            row-key="name"
          >
            <q-td slot="body-cell-QTY" slot-scope="props" :props="props">
              <q-input v-model="materialInBill[props.row.__index][QTY]" type="number"/>
            </q-td>
            <q-td slot="body-cell-CZ" slot-scope="props" :props="props">
              <q-btn label="异常料处理" color="primary" @click="openExecDialog(props.row.__index)"/>
            </q-td>
          </q-table>
        </q-page>
      </xscrollarea>
      <q-modal v-model="opened" :content-css="{minWidth: '80vw', minHeight: '80vh'}" @hide="hide">
        <q-modal-layout>
          <div class="layout-padding">
            <q-input ref="execQty" float-label="异常数量" v-model="execQty" type="number"/>
            <q-input ref="execReason" float-label="异常原因" v-model="execReason" type="textarea"/>
            <q-btn
              color="primary"
              label="确认"
              @click="exec"
            />

          </div>
        </q-modal-layout>
      </q-modal>
    </q-page-container>
  </q-layout>
</template>

<script>

  import Xheader from '../../components/xheader'
  import Xscrollarea from '../../components/xscrollarea'

  export default {
    name: 'material_in',
    components: { Xscrollarea, Xheader },
    props: {
      title: {}
    },
    data: () => (
      {
        code: '',
        peifangCode: '',
        manuBatchInfo: '',
        materialInBill: [],
        scrollHeight: 0,
        opened: false,
        columns: [
          { name: 'BATCH_NO', label: '装料批次', field: 'BATCH_NO' },
          { name: 'PRO_NAME', label: '物料名称', field: 'PRO_NAME' },
          { name: 'QTY', label: '数量', field: 'QTY' },
          { name: 'UNAME', label: '单位', field: 'UNAME' },
          { name: 'CZ', label: '操作', field: 'CZ' }
        ],
        execQty: '',
        execReason: '',
        execIndex: ''
      }
    ),
    methods: {
      submit () {
        if (!this.materialInBill || this.materialInBill.length === 0) {
          this.$parent.info('没有任何数据需要保存！')
          return
        }
        let flag = false
        for (let v of this.materialInBill) {
          if (!(v.QTY * 1 >= 0)) {
            flag = true
            return false
          }
        }
        if (flag) {
          this.$parent.info('[数量]请输入大于等于0的数！')
          return
        }
        this.$parent.confirm('提示', '确认提交？', () => {
          this.axios.post(this.$conf.server + '/materialIn/saveMaterialIn', this.$qs.stringify({
            manuBatchId: this.manuBatchInfo.ID,
            peifangCode: this.peifangCode,
            data: JSON.stringify(this.materialInBill)
          })).then(res => {
            this.$parent.info(res.data.msg)
            if (res.data.result) {
              this.code = ''
              this.peifangCode = ''
              this.manuBatchInfo = ''
              this.materialInBill = ''
            }
          })
        })
      },
      searchCode () {
        if (this.code === '') {
          return
        }
        if (this.peifangCode === '') {
          return
        }
        this.axios.post(this.$conf.server + '/materialIn/getMaterialInBill', this.$qs.stringify({
          code: this.code,
          peifangCode: this.peifangCode
        })).then(res => {
          if (res.data.result) {
            this.manuBatchInfo = res.data.manuBatchInfo
            this.materialInBill = res.data.materialInBill
          } else {
            this.$parent.info(res.data.msg)
          }
        })
      },
      exec () {
        if (!(this.execQty * 1 >= 0) || this.execQty * 1 > this.materialInBill[this.execIndex].QTY_ORIG) {
          this.$parent.info(`[异常数量]请输入大于等于0且不大于${this.materialInBill[this.execIndex].QTY_ORIG}的数！`)
          this.$refs.execQty.focus()
          return
        }
        if (!this.execReason) {
          this.$parent.info('请输入异常原因！')
          this.$refs.execReason.focus()
          return
        }

        this.axios.post(this.$conf.server + '/materialIn/saveMatExecQty', this.$qs.stringify({
          detailId: this.materialInBill[this.execIndex].EMESO_PUT_MATERIAL_DETAIL_ID,
          execQty: this.execQty,
          execReason: this.execReason
        })).then(res => {
          this.$parent.info(res.data.msg)
          if (res.data.result) {
            this.materialInBill[this.execIndex].QTY = this.materialInBill[this.execIndex].QTY_ORIG - this.execQty
            this.opened = false
            this.execQty = ''
            this.execReason = ''
          }
        })
      },
      openExecDialog (execIndex) {
        this.opened = true
        this.execIndex = execIndex
      },
      hide () {
        this.execQty = ''
        this.execReason = ''
      }

    },
    mounted () {
      this.scrollHeight = this.$parent.webHeight - this.$refs.header.$el.clientHeight
    }

  }
</script>

<style scoped>

</style>
